<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>
<body>
    <div class="nav">五子棋对战</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个div在container中处于水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>

        </div>
    </div>

    <script src="JS/jquery.min.js"></script>
    <script>
        $.ajax({
            type:'GET',
            url:'/userquery',
            success: function(body){
                let srceenDiv = document.querySelector('#screen');
                srceenDiv.innerHTML = '玩家: ' + body.username + '分数: ' + body.score 
                + "<br> 比赛场次: " + body.totalCount + ' 获胜场数: ' + body.winCount
            },
            error: function(){
                alert("获取用户信息失败!");
            }
        })

        //此处进行初始化 websocket,并且实现前端的匹配逻辑
        //此处的路径必须写作/findMatch,千万不要写作/findMarch/
        let websocketUrl = 'ws://' + location.host + '/findMatch';
        let websocket = new WebSocket(websocketUrl);
        websocket.onopen = function(){
        console.log("onopen");
    
    }
    websocket.onerror = function(){
        console.log("onerror");
    
    }
    websocket.onclose = function(){
        console.log("onclose");    
    }
    //监听页面关闭事件,在页面关闭之前,手动调用这里的 websocket 的 close 方法
    Window.onbeforeunload = function(){
        websocket.close();
    }

    websocket.onmessage = function(e){
        //处理服务器返回的响应数据.这个响应就是针对"开始匹配" /"结束匹配" 来对应的
        //解析得到的响应对象. 返回的数据是一个 JSON 字符串,解析成 js 对象
        let resp = JSON.parse(e.data);
        let matchbutton = document.querySelector('#match-button');
        if(!resp.ok){
            console.log("游戏大厅接收到了失败响应! " + resp.reason)
        }
        if(resp.message == 'startMatch'){
            //开始匹配请求发送成功
            console.log("进入匹配队列成功!");
            matchbutton.innerHTML = '匹配中...(点击停止)'
        }else if(resp.message == 'stopMatch'){
            //结束匹配请求发送成功
            console.log("离开匹配队列成功");
            matchbutton.innerHTML = '开始匹配';
        }else if(resp.message == 'matchSuccess'){
            //已经匹配到对手了.
            console.log("匹配到对手!进入游戏房间");
            location.replace("/game_room.html");

        }else if(resp.message == 'repeatConnection'){
            
        alert("当前检测到多开! 请使用其他账号登录!")
        location.replace("/login.html");

        }else{
            console.log("收到了非法的响应! message=" + resp.message);
        }
    
    }

    //给匹配按钮添加一个点击事件
    let matchbutton = document.querySelector('#match-button');
    matchbutton.onclick = function(){
        //在触发 websocket 请求之前,先确认下 websocket 连接是否好着呢 ~
        if(websocket.readyState == websocket.OPEN){
            //如果当前 readyState 处在 OPEN 状态,说明连接好着的~
            //这里发送的数据有两种可能,开始匹配/停止匹配
            if(matchbutton.innerHTML == '开始匹配'){
                console.log('开始匹配')
                websocket.send(JSON.stringify(
                    {
                        message: 'startMatch',

                }
                    
                ));

            }else if(matchbutton.innerHTML == '匹配中...(点击停止)'){
                console.log('停止匹配');
                websocket.send(JSON.stringify({
                    message: 'stopMatch',
                }));

            }
        }else{
            //这是说明连接当前是异常的状态
            alert("当前您的连接已经断开! 请重新登录");
            location.replace('/login.html')
        }
    }
    </script>
</body>
</html>